<template>
	<el-card>
		<!-- 搜索 -->
		<el-form v-show="showSearch" :model="searchData" inline ref="searchDataRef" id="searchForm">
			<el-form-item label="字典" prop="dictId">
				<el-select v-model="searchData.dictId" clearable placeholder="">
					<el-option v-for="(item,index) in dictList" :value="item.id" :label="item.name"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="名称" prop="name">
				<el-input v-model="searchData.name" clearable placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="标识" prop="type">
				<el-input v-model="searchData.type" clearable placeholder=""></el-input>
			</el-form-item>
			<el-form-item>
				<el-button icon="el-icon-search" type="primary" size="mini" @click="searchClick">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetClick">重置</el-button>
			</el-form-item>
		</el-form>
		
		<el-row id="operate" :gutter="10" style="margin-bottom: 3px;">
			<el-col :span="10">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addShowClick">新增</el-button>
			</el-col>
			<right-toolbar :columns="columns" :search="true" :showSearch.sync="showSearch"
				@refresh="searchClick"></right-toolbar>
		</el-row>

		<!-- 表格渲染 -->
		<gz-table ref="tableRef" :searchData="searchData" :columns="columns" api="appDictDataFindAllByPage"
			@handleSwitchChange="tableStateChange">
			<el-table-column label="操作">
				<template v-slot="scope">
					<el-button type="text" icon="el-icon-edit" @click="editShowClick(scope.row)">修改</el-button>
					<el-button type="text" icon="el-icon-delete" @click="deleteClick(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</gz-table>

		<!-- 添加 -->
		<gz-dialog @confirm="confirmClick" width="500px" ref="gzDialogRef" title="添加/修改">
			<template>
				<el-form :model="curData" ref="curFormRef" :show-message="false" label-width="80px">
					<el-form-item label="字典名称" prop="dictId" required>
						<el-select v-model="curData.dictId" placeholder="">
							<el-option v-for="(item,index) in dictList" :value="item.id" :label="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数据名称" prop="name" required>
						<el-input v-model="curData.name" placeholder="" clearable></el-input>
					</el-form-item>
					<el-form-item label="数据标识" prop="type" required>
						<el-input v-model="curData.type" placeholder="" clearable></el-input>
					</el-form-item>
					<el-form-item label="是否默认" prop="isDefault" required>
						<el-select v-model="curData.isDefault" placeholder="">
							<el-option :value="true" label="是"></el-option>
							<el-option :value="false" label="否"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="回显样式" prop="listClass">
						<el-select v-model="curData.listClass" placeholder="">
							<el-option v-for="(item,index) in listClassOptions" :value="item.value" :label="item.label + '(' + item.value + ')'"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="显示排序" prop="sort" required>
						<el-input v-model="curData.sort" type="number" placeholder="" clearable></el-input>
					</el-form-item>
				</el-form>
			</template>
		</gz-dialog>
	</el-card>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				showSearch: true,
				//表格数据
				searchData: {
					type: null,
					name: null,
					state: null,
				},
				curData: {
					dictId: null,
					type: null,
					name: null,
					state: true,
					isDefault: false,
					listClass: 'default',
					sort: 0,
				},
				columns: [{
						label: "字典名称",
						prop: "dictName",
						isShow: true,
						
					},
					{
						label: "名字",
						prop: "name",
						isShow: true,
					},
					{
						label: "名字标识",
						prop: "type",
						isShow: true,
					},
					{
						label: "是否默认",
						prop: "isDefault",
						type: "tag",
						isShow: true,
						options: [{
								value: true,
								type: "primary",
								label: "是"
							},
							{
								value: false,
								type: "info",
								label: "否"
							},
						],
					},
					{
						label: "标识",
						prop: "listClass",
						type:"tag",
						isShow: true,
						options:[
							{
									type: "default",
									value: "default",
									label: "默认"
								},
								{
									type: "primary",
									value: "primary",
									label: "主要"
								},
								{
									type: "success",
									value: "success",
									label: "成功"
								},
								{
									type: "info",
									value: "info",
									label: "信息"
								},
								{
									type: "warning",
									value: "warning",
									label: "警告"
								},
								{
									type: "danger",
									value: "danger",
									label: "危险"
								}
						]
					},
					{
						label: "排序",
						isShow: true,
						prop: "sort"
					},
				],
				dictList: [],
				// 数据标签回显样式
				listClassOptions: [{
						value: "default",
						label: "默认"
					},
					{
						value: "primary",
						label: "主要"
					},
					{
						value: "success",
						label: "成功"
					},
					{
						value: "info",
						label: "信息"
					},
					{
						value: "warning",
						label: "警告"
					},
					{
						value: "danger",
						label: "危险"
					}
				],
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.searchClick()
			})

			this.$api.appDictFindAllByList().then(data => {
				this.dictList = data
			});
		},
		methods: {
			//设置表格高度
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},
			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//重置按钮
			resetClick() {
				this.$refs.searchFormRef.resetFields();
				this.searchClick()
			},
			//添加展示
			addShowClick() {
				this.curData = {
					dictId: null,
					type: null,
					name: null,
					state: true,
					isDefault: false,
					listClass: 'default',
					sort: 0,
				}
				this.$refs.gzDialogRef.open()
			},
			//添加/修改
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
				this.$refs.curFormRef.validate(async (valid) => {
					if (valid) {
						if (this.$common.isBlank(data.id)) {
							await this.$api.appDictDataAdd(data)
						} else {
							await this.$api.appDictDataEdit(data);
						}
						this.$refs.gzDialogRef.close()
						this.searchClick()
					}
				});
			},
			//删除
			deleteClick(row) {
				this.$common.msgBoxDel(() => {
					this.$api.appDictDataDelByIds(row.id).then(res => {
						this.searchClick();
					});
				})
			},
			//修改
			editShowClick(row) {
				let data = JSON.parse(JSON.stringify(row))
				this.curData = data
				this.$refs.gzDialogRef.open()
			},
			tableStateChange(row) {
				this.$api.appDictDataEdit(row)
			}
		},
	};
</script>

<style lang="scss" scoped>
/deep/ .el-card__body {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.el-form-item {
		padding-bottom: 0px;
		margin-bottom: 9px;
	}
</style>
